<template>
	<el-container class="layout">
		<el-header>
			<div class="header-lf">
				<div class="logo flx-center" v-if="!appConfig.isPhone">
					<img src="@/assets/images/logo.svg" alt="logo" />
				</div>
        <ExpandCollapseIcon @click="toggleMenuVisible"/>
      </div>
      <ToolBarRight />
		</el-header>
		<el-container class="classic-main">
			<Main />
		</el-container>
	</el-container>
  <div>
    <el-drawer
      v-model="appConfig.sideMenuVisible"
      direction="ltr"
      :show-close="false"
      size="210px"
    >
      <template #header="{ titleId, titleClass }">
        <div class="drawer-logo" :id="titleId" :class="titleClass">
          <img src="@/assets/images/logo.svg" alt="logo" />
          <span>Campus Admin</span>
        </div>
      </template>
      <div class="menu">
        <el-scrollbar>
          <el-menu
            :default-active="activeMenu"
            :router="false"
            :unique-opened="true"
          >
            <SubMenu :menuList="menuList" />
          </el-menu>
        </el-scrollbar>
      </div>

    </el-drawer>
  </div>

</template>

<script setup lang="ts" name="layoutClassic">
import Main from "@/components/layouts/main-container.vue";
import ExpandCollapseIcon from "@/components/layouts/icons-button/expand-collapse.vue"
import ToolBarRight from "@/components/layouts/top-Navbar/top-Navbar-right/index.vue";
import { useAppConfigStore,useAuthMenuAndButtonStore } from "@/stores";
const authStore = useAuthMenuAndButtonStore()
const appConfig = useAppConfigStore()
const route = useRoute();
const activeMenu = computed(() => route.path);
const menuList = authStore.showMenuListGet

function toggleMenuVisible() {
    appConfig.toggleMenuVisible();

}
</script>

<style scoped lang="scss">
	.el-menu,
	.el-menu--popup {
		:deep(.el-menu-item) {
			&.is-active {
				background: var(--el-color-primary-light-9);
				&::before {
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					width: 4px;
					content: "";
					background: var(--el-color-primary);
				}
			}
		}
	}

:deep(.el-drawer){

  .el-drawer__header{
    margin-bottom: 0;
  }
  .el-drawer__header,.el-drawer__body{
    padding-left: 0;
    padding-right: 0;
  }
}
  .drawer-logo {
    width: 200px;
    margin-right: 16px;
    span {
      font-size: 21.5px;
      font-weight: bold;
      color: var(--el-text-color-primary);
      white-space: nowrap;
    }
    img {
      width: 28px;
      object-fit: contain;
      margin-right: 6px;
    }
  }




.el-container {
	width: 100%;
	height: 100%;
	.el-header {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 45px;
		padding: 0;
		background-color: var(--el-bg-color);
		border-bottom: 1px solid var(--el-border-color);

		.header-lf {
			display: flex;
			align-items: center;
			.logo {
				width: 20px;
				margin-right: 16px;
				img {
					width: 28px;
					object-fit: contain;
					margin-right: 6px;
				}
			}
		}
	}
  .classic-main {
		height: calc(100% - 55px); // 减去头部高度
			display: flex;
			flex-direction: column;
	}
}
</style>

<style lang="scss">
	// guide
	#driver-highlighted-element-stage {
		background-color: #606266 !important;
	}
</style>
